<script setup lang="ts" name="Person">
    import { ref } from 'vue'
    import { usePersonStore} from '../store/person'

    const countStore = usePersonStore()
    console.log(countStore)



    console.log(this)
    //  如果直接这样定义那么数据就不是相应和式的了
    //  reactive(for object) 和 ref(for basic type) 都是响应式的
    let name = ref('zhangsan')
    // let age = ref(30)
    let isMarried = false
    let hobbies = ['reading', 'sports', 'music']
    

    function changeName(newName: string) {
        // name.value = newName
        //  使用action
        countStore.updateName(newName)
    }
    function increaseAge() {
        // countStore.age += 1
        countStore.$patch({
            age: countStore.age + 1,
            name: 'wangwu'
        })
    }
    function diagleData() {
        alert(`Name: ${name}, Age: ${countStore.age}, Is Married: ${isMarried}, Hobbies: ${hobbies.join(', ')}`)
    }

    // 替换 vue 中的watch 
    countStore.$subscribe((state, mutation) => {
        console.log(state, mutation)
    })
    

</script>

<template>
  <div class="person">
  <!--  使用pinia获取数据 -->
    <h2>{{ countStore.name }}</h2>
    <p>Age: {{ countStore.age }}</p>
    <button @click="countStore.age--">Decrease Age</button>
    <button @click="increaseAge">Increase Age</button>
    <button @click="diagleData">alert</button>
    <input type="text" placeholder="Change Name" @input="changeName($event.target?.value || '')" />
  </div>
</template>

<style scoped>
.person {
    font-family: Arial, sans-serif;
    text-align: center;
    margin: 20px;
}

button:hover {
    margin-top: 10px;
    padding: 5px 10px;
    margin: 0 10px;
    font-size: 16px;
    cursor: pointer;
    filter: drop-shadow(0 0 2em #d4d643aa);
}

input:hover {
    margin-top: 10px;
    padding: 5px 10px;
    margin: 0 10px;
    font-size: 16px;
    cursor: pointer;
    filter: drop-shadow(0 0 2em #d4d643aa);
}
</style>
